import React,{useState} from 'react'
import './Appheader.less'
import { useRef } from 'react';

export default function AppHeader(props) {
    const img = '//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg';
    const smallimg = 'https://p3-piu.byteimg.com/tos-cn-i-8jisjyls3a/0d1dfe0d00f148e0b1891243470195d1~tplv-8jisjyls3a-3:0:0:q75.png';
    const inp = useRef(null);
    const { headlist, onSearch } = props;
    const [show, setShow] = useState(true);
    
    const search = () => {
        const searchValue = inp.current.value;
        console.log(searchValue);
        onSearch(searchValue);
        
    }
    return (
        <div>
            <div className="header container">
                <div className="logo">
                    <img src={img} alt="" />
                </div>
                <div className="title">
                    {
                        headlist.map((item, index) => {
                            return <div className='title-item' key={index}>{item.name}</div>
                        })
                    }
                </div>
                <div className="small">
                    <img src={smallimg} alt="" />
                </div>
                <div className="inpbtn" onFocus={() => setShow(false)} onBlur={() => setShow(true)}>
                    <div className={show ? 'inp' : 'inp active'}>
                        <input type="text"  ref={inp}/>
                        <button className={show ? '' : 'btnactive'} onClick={search}>搜索</button>
                    </div>
                    <div className="create" style={{display: show ? 'block' : 'none'}} >创作者中心</div>
                </div>

            </div>

        </div>

    )
}
